<%@ page session="true" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<style>

	.yui-carousel-element li { 
	    width: 275px; 
	    height: 105px; 
	} 
	
	.yui-carousel-element .yui-carousel-item-selected { 
   background-color:orange;
	} 



</style>
<div id="stattabs">
    <ul>
     
        <li>
            <a href="#countryrankstat">Leader Board</a>
        </li>
        <li>
            <a href="#globalstat">Global Dominators</a>
        </li>
    </ul>
   
      <!--  <div id="indirankstat">
           <img src="images/loading.gif"  alt="Loading.Please wait.." />
           [Need to add screen here]
        </div>
     --> 
  
        <div id="countryrankstat">
Global Leaderboard for the last one hour<br>
<div id="scorecontainer" class="yui-skin-sam" style="width:100%">
      <ol id="scoreboard">             
    
</ol>
</div>               
        </div>

  
        <div id="globalstat">
                 <img src="images/loading.gif"  alt="Loading.Please wait.." />
        Statistics are updated in realtime.
        </div>
       
    
</div>
<script language="javascript">

var scores=new Array();
var i=0;
<c:forEach var='item' items='${personalstats}'>
scores.push(new Array());
scores[i].push(${item.key});
scores[i].push(${item.value});
i++;
</c:forEach>


var ctrs="KN";
var ctrscore="0";
<c:forEach var='item' items='${countrystats}'>
ctrs+="${item.key}";
ctrscore=ctrscore +",${item.value}" ;
</c:forEach>
var imgsrc="<img src='http://chart.apis.google.com/chart?chf=bg,s,EAF7FE&chs=440x220&cht=t&chco=FFFFFF,00FF00,00EB00,00C900,00AA00,008E00,007800,005C00,004A00,001000&chld="+ctrs +"&chd=t:"+ ctrscore +"&chtm=world'>";

var scorecarousel;
$(function(){
$('#stattabs').tabs();
insertContents();
$("#globalstat").html(imgsrc);
buildScoreCarousel();
});

function buildScoreCarousel()
{
	scorecarousel    = new YAHOO.widget.Carousel("scorecontainer", {
         numVisible: [1,5] ,isVertical:true
 });
         
	scorecarousel.render(); 
	scorecarousel.show(); 
	scorecarousel.set("selectedItem", 0);
	
}

function insertContents()
{
scores.sort(mySorting);
	for(var i=0;i<scores.length;i++)
	{
	//$("#scoreboard").append();
	var ix="<li class='item'> <img src='https://graph.facebook.com/"+  scores[i][0] + "/picture?type=square'> <br> $:" + scores[i][1]  +" </li>";
	//scorecarousel.addItem(ix);
	$("#scoreboard").append(ix);
	}
	
}

function mySorting(a,b) {
a = a[1];
b = b[1];
return a == b ? 0 : (a < b ? 1 : -1)
}

  
    
</script>
